<template>
  <div>
    <div class="img-container" :class="{'active-container': imgUrl}">
      <label :for="'img-input' + uuid">
        <i v-if="!imgUrl" class="el-icon-plus" />
        <input
          :id="'img-input' + uuid"
          :value="inputFile"
          class="img-input"
          type="file"
          accept=".jpg, .jpeg, .png, .gif, .bmp, .pdf, .JPG, .JPEG, .PBG, .GIF, .BMP, .PDF"
          @change="fileChange($event)"
        >
      </label>
      <img v-if="imgUrl" class="img" :src="imgUrl">
      <span v-if="imgUrl" class="action-label">
        <i class="el-icon-zoom-in" @click="handlePreview" />
        <i class="el-icon-delete" @click="handleDelete" />
      </span>
    </div>
    <el-dialog :visible.sync="previewVisible" append-to-body>
      <img width="100%" :src="imgUrl" alt>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    md5: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      previewVisible: false,
      inputFile: '',
      img: ''
    }
  },
  computed: {
    imgUrl: {
      get() {
        if (this.img) {
          return this.img
        }
        if (this.md5) {
          return this.$api.getDownloadServiceUrl(this.md5)
        }
        return ''
      }
    },
    uuid: {
      get() {
        return new Date().getTime() + '' + Math.ceil(Math.random() * 10)
      }
    }
  },
  async created() {

  },
  methods: {
    handlePreview() {
      this.previewVisible = true
    },
    handleDelete() {
      this.img = ''
      this.inputFile = ''
      this.$emit('update:md5', '')
      this.$emit('change', '')
    },
    async fileChange(event) {
      const file = event.target.files[0]
      this.$emit('change', file)
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        this.img = e.target.result
      }
    }
  }
}
</script>

<style lang="scss" scope>
.img-container {
  width: 100px;
  height: 100px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  line-height: 104px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  label {
    display: inline-block;
    width: 100px;
    height: 100px;
    cursor: pointer;
    .el-icon-plus {
      font-size: 28px;
      color: #8c939d;
      cursor: pointer;
    }
    .img-input {
      position: absolute;
      top: 0;
      display: none !important;
      cursor: pointer;
    }
  }
  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 98px;
    height: 98px;
  }
  .action-label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    display: none;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.6);
    .el-icon-zoom-in {
      color: #ffffff;
      font-size: 16px;
    }
    .el-icon-delete {
      color: #ffffff;
      font-size: 16px;
      margin-left: 10px;
    }
  }
}
.img-container:hover {
  border: 1px dashed #f07509;
  .el-icon-plus {
    color: #f07509;
  }
}
.active-container {
  border: 1px solid #c0ccda;
}
.active-container:hover {
  border: 1px solid #c0ccda;
  .action-label {
    display: block;
  }
}
</style>
